<template>
  <div class="left-chart-1">
    <div class="lc1-header">
      <i class="status ON"></i>
      <span>运行</span>
      <i class="status OFF"></i>
      <span>停机</span>
      <i class="status UNKNOWN"></i>
      <span>离线</span>
    </div>
    <CustomChart
      v-if="option.xAxis.data.length"
      class="lc2-chart"
      :option="option"
    />
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import CustomChart from "./CustomChart";
import { getEquipmentOffInfo } from "@/api/dashboard/blowIrriagtionSpinLine";
const lineLabelColor = "#ffffffeb";
const equipColor = {
  ON: "#34855c",
  OFF: "#f54e1e",
  UNKNOW: "#909399",
};
export default {
  name: "RightChart2",
  components: { CustomChart },
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      option: {
        grid: {
          top: 46,
          right: 30,
          bottom: 50,
        },
        tooltip: {
          trigger: "axis",
          padding: [5, 10],
        },
        legend: {
          // top: "middle",
          // right: 0,
          // orient: "vertical",
          data: [
            {
              name: "停机时长",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              // icon: "path://M8,4 h24 q4,0 4,4 v24 q0,4 -4,4 h-24 q-4,0 -4,-4 v-24 q0,-4 4,-4",
              textStyle: {
                padding: [0, -6],
              },
            },
            {
              name: "异常停机时长",
              icon: "path://M10 0 H 90 C 100 10, 100 0, 100 100 V 90 C 90 100, 100 100, 0 100 H 10 C 0 90, 0 100, 0 0 V 10 C 10 0, 0 0, 100 0",
              // icon: "path://M8,4 h24 q4,0 4,4 v24 q0,4 -4,4 h-24 q-4,0 -4,-4 v-24 q0,-4 4,-4",
              textStyle: {
                padding: [0, -6],
              },
            },
          ],
          itemGap: 16,
          textStyle: {
            color: lineLabelColor,
          },
          // itemWidth: 15,
          itemHeight: 13,
        },
        xAxis: {
          data: [],
          axisLine: {
            lineStyle: {
              color: lineLabelColor,
            },
          },
          axisLabel: {
            interval: 0,
            color: lineLabelColor,
            rotate: 20,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: "时长(min)",
            nameGap: 20,
            nameTextStyle: {
              color: lineLabelColor,
            },
            position: "left",
            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: lineLabelColor,
              },
            },
            axisLabel: {
              color: lineLabelColor,
              hideOverlap: true,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "停机时长",
            data: [],
            type: "bar",
            label: {
              show: true,
              fontSize: 8,
              position: "top",
              color: lineLabelColor,
              formatter: (param) => {
                return `${this.toFix(
                  param.data?.equipMonthAbnormalTimes || 0,
                  2
                )}次\n${param.value}`;
              },
            },
            barGap: 0,
            barWidth: "30%",
          },
          {
            name: "异常停机时长",
            data: [],
            type: "bar",
            label: {
              show: true,
              fontSize: 8,
              position: "top",
              color: lineLabelColor,
              formatter: (param) => {
                return `${this.toFix(
                  param.data?.equipHandleAbnormalTimes || 0,
                  2
                )}次\n${param.value}`;
              },
            },
            barGap: 0,
            barWidth: "30%",
          },
        ],
      },
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      if (!this.lineItem) {
        return;
      }
      const param = {
        lineId: this.lineItem.value,
      };
      getEquipmentOffInfo(param)
        .then((res) => {
          if (res?.data?.equipmentRunStatuss?.length) {
            const _equipmentRunStatuss = res.data.equipmentRunStatuss.sort(
              (a, b) => {
                return a.equipMonthAbnormalDuration <=
                  b.equipMonthAbnormalDuration
                  ? 1
                  : -1;
              }
            );

            let xAxisData = [];
            let seriesData1 = [];
            let seriesData2 = [];

            _equipmentRunStatuss.forEach((ele) => {
              xAxisData.push({
                value: ele.equipName,
                textStyle: {
                  color: equipColor[ele.runStatus],
                },
              });
              seriesData1.push({
                name: ele.equipName,
                value: ele.equipMonthAbnormalDuration || 0,
                ...ele,
              });
              seriesData2.push({
                name: ele.equipName,
                value: ele.equipHandleAbnormalDuration || 0,
                ...ele,
              });
            });

            this.option.xAxis.data = xAxisData;
            this.option.series[0].data = seriesData1;
            this.option.series[1].data = seriesData2;
          } else {
            this.option.xAxis.data = [];
            this.option.series[0].data = [];
            this.option.series[1].data = [];
          }
        })
        .catch(() => {
          this.option.xAxis.data = [];
          this.option.series[0].data = [];
        });
    },
  },
  watch: {
    refreshKey: {
      handler() {
        this.getData();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .lc1-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    text-align: center;
    margin-top: 30px;
    i {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      &.ON {
        background-color: #34855c;
      }
      &.OFF {
        background-color: #f54e1e;
      }
      &.UNKNOWN {
        background-color: #909399;
      }
    }
  }
  .lc2-chart {
    flex: 1;
  }
}

.no-data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
